<template>
	<view class="index c0">
		<view class="bf">
			<u-tabs :current="current" :lineColor="subColor" :lineWidth="35" :list="list1" :scrollable="false"
				activeStyle="font-weight:bold;color:#111;" inactiveStyle="color:#111" @click="click"></u-tabs>
		</view>
		<view v-if="current===0" class="p10">
			<view class="top mb10 bf">
				<view class="type f-x-bt bb1">
					<text>修改类型</text>
					<view class="dfa">
						<view class="butt" v-for="(v,i) in buts" :key="i" :class="{'isact':activeNum === i}" :style="{border:activeNum === i? '1px solid'+subColor:'',
					backgroundColor:activeNum === i? subColor:''}" @click="change(i)">{{v}}</view>
					</view>
				</view>
				<view class="money f-bt ">
					<text class="mr10">修改金额</text>
					<view class="f-1">
						<view class="f-s bb1">
							<text class="c3">本金</text>
							<u--input v-model="form.capital" placeholder="请输入修改金额" border="none"
								:customStyle="{'width':'100%','flex':1,'padding': '0px 15px 8px',}" clearable>
							</u--input>
							<text class="c3">元</text>
						</view>
						<view v-if="activeNum==0" class=" mt10 f-s bb1">
							<text class="c3">赠金</text>
							<u--input v-model="form.gift" placeholder="请输入修改金额" border="none"
								:customStyle="{'width':'100%','flex':1,'padding': '0px 15px 8px',}" clearable>
							</u--input>
							<text class="c3">元</text>
						</view>
					</view>
				</view>
			</view>
			<view class="desc bf f-x-bt p10">
				<text class="bf mr10">备注</text>
				<u--input v-model="form.desc" placeholder="请输入" border="none"
					:customStyle="{'width':'100%','flex':1,'padding': '0px 15px',}" clearable>
				</u--input>
			</view>
			<view class="butBox">
				<view class="button tac f18 wei5 cf" @click="save" :style="{background:subColor}">确定修改</view>
			</view>
		</view>
		<view v-else class="">
			<view class="nav_item">
				<view class="card c9 f16 mb10" v-for="(item,index) in list" :key="index">
					<view class="dfbc pb10">
						<text>所属渠道</text>
						<view class="c0 dfa">
							<image class="imag mr10" :src='`${imgPath}/static/imgs/wx.png`' mode=""></image>
							<text>{{item.channel?item.channel:'未知'}}</text>
						</view>
					</view>
					<view class="dfbc pb10">
						<text>门店名称</text>
						<text class="c0">{{item.store}}</text>
					</view>
					<view class="dfbc pb10">
						<text>线下增加</text>
						<text class="c0">￥{{item.add}}</text>
					</view>
					<view class="dfbc">
						<text>所属渠道</text>
						<text class="c0">{{item.time}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				subColor: uni.getStorageSync('subject_color'),
				current: 0,
				activeNum: 0,
				buts: ['增加', '扣减'],
				list1: [{
					name: '储值修改',
				}, {
					name: '储值记录',
				}],
				form: {
					type: 0,
					capital: '',
					gift: '',
					desc: ''
				},
				imgPath:getApp().globalData.onImgurl,
				list: [{
						id: 0,
						channel: '',
						store: '测试门店1',
						add: 3,
						time: '2023-04-27 16:08:51'
					},
					{
						id: 2,
						channel: '',
						store: '测试门店1',
						add: 99,
						time: '2023-04-27 16:08:51'
					},
				]
			}
		},
		methods: {
			change(i) {
				this.activeNum = i
				this.form.type = i
			},
			save() {
				console.log(this.form, '改');
			},
			click(e) {
				this.current = e.index
			}
		}
	}
</script>

<style lang="scss" scoped>
	.index {
		background-color: #f6f6f6;

		.c0 {
			color: #111111;
			font-size: 30rpx;
		}

		.top {
			width: 100%;
			border-radius: 20rpx;

			.type {
				padding: 20rpx;

				.butt {
					margin-left: 15rpx;
					padding: 15rpx 40rpx;
					border-radius: 20rpx;
					border: 1px solid #e2e2e2;
					font-size: 14px;
				}

				.isact {
					color: #fff;
				}
			}

			.money {
				padding: 20rpx;
			}
		}

		.desc {
			padding: 20rpx;
			width: 100%;
			border-radius: 20rpx;
		}

		.butBox {
			width: 100%;
			position: fixed;
			bottom: 60rpx;
			left: 0;
			padding: 20rpx;

			.button {
				width: 100%;
				border-radius: 55rpx;
				padding: 30rpx;
			}
		}

		/deep/.u-tabs__wrapper__nav__item__text {
			font-size: 16px;
		}

		.nav_item {
			width: 100%;
			height: 100%;
			padding: 24rpx;

			.imag {
				width: 35rpx;
				height: 35rpx;
			}
		}
	}
</style>